<template>
	<view class="bodys">
		<carHeader :title="'核销操作'"></carHeader>
		
		<view class="content">
			<!-- 主体 -->
			
			<view class="main">
				<view class="container1">  
				    <view class="uni-form-item">  
				      <view class="title1">输入核销码：</view> 
				      <input   
				        class="input"   
				        v-model="inputValue"   
				        focus  
				        placeholder="MC-1234-5678-9012"   
				        ref="autoFocusInput"  
				      />  
				    </view>  
				    <button @click="submitData" class="button">识别</button>  
				  
				  </view>   
				<!-- 标题 -->
				<block v-if="this.isblock">
					<view class="title">核销码<text style="margin-left: 20rpx;">{{heXiaoCode}}</text></view>
						<!-- 服务内容 -->
						<view class="service">
							<view class="title2">服务内容</view>
							<view v-for="(item,index) in services.list" :key="index">
								{{item}}
							</view>
							<view>({{services.msg}})</view>
						</view>
						<!-- 订单信息 -->
						<view class="order">
							<view class="title2">订单信息</view>
							<view v-for="(item,index) in orderInformation" :key="index">
								<view>订单价格<text>￥{{item.serviceList[0].oldPrice}}</text></view>
								<view>实付金额<text>￥{{item.serviceList[0].newPrice}}</text></view>
								<view>优惠金额<text>￥{{item.serviceList[0].oldPrice-item.serviceList[0].newPrice}}</text></view>
								<view>订单编号<text>{{item.ddNumber}}</text></view>
								<view>支付时间<text>{{item.ddAddtime}}</text></view>
								<view>预约时间<text>{{item.ddYuyueTime}}</text></view>
							</view>
						</view>
						<!-- 确认核销 -->
					<view class="but">
						<button v-if="!flag" type="primary" @click="toggle('center')">确认核销</button>
						<button v-else style="background-color: #666; color: #fff;">已核销</button>
					</view>
				</block>
					</view>
					
					
				
		</view>
		
		<!-- 弹框 -->
		<view>
			<!-- 核销此订单弹框 -->
			<uni-popup ref="popup">
				<view class="ifsubmit">
					<view class="subTitle"><text>核销此订单</text></view>
					
					<view class="subContent"><text>请您仔细核对订单，此操作不可撤销请谨慎操作!</text></view>	
					
					<view class="but">
						<button style="background-color: #eee;" @click="cancel">取消</button>
						<button type="primary" @click="submit">确认</button>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 inputValue: '',
				// 核销码
				heXiaoCode: '',
				isblock:false,
				// 服务内容
				services: {
					list: ["XXX标准洗车服务包含","整车泡沫冲洗擦T","轮胎轮毅冲洗清洁","车内吸尘","内饰脚垫简单除尘"],
					msg: "不包含虫户、水泥、沥青和顽固污渍清理等"
				},
				// 订单信息
				orderInformation: {},
				// 是否已经核销
				flag: false,
			};
		},
		created() {
			this.getApp()
		},
		 mounted() {  
		    // 组件挂载后立即聚焦到输入框  
		    this.$refs.autoFocusInput.focus();  
		  }, 
		methods: {
			getApp(){
				uni.request({
									url: 'http://localhost:8080/shop/hexiao/list1',
									method: 'POST',
									data: {
										hexiao:this.heXiaoCode
									},
									success: (res) => {
										
										this.orderInformation = res.data.rows;
										console.log(this.repairForm)
										if(this.orderInformation[0].hexiao!=null){
											console.log(this.orderInformation[0].hexiao===this.heXiaoCode)
											this.isblock=true
										}
									},
								});
			},
			
			toggle(type) {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			// 取消
			cancel(){
				this.$refs.popup.close()
			},
			// 确定
			submit(){
				this.flag = true;
				this.$refs.popup.close()
			},
			submitData() {  
			      // 提交数据，这里只是简单地将数据输出到控制台  
				  this.heXiaoCode=this.inputValue
			      console.log('提交的数据:', this.inputValue);
					this.getApp(),
					this.isblock=false
					
			      // 如果需要发送到服务器，可以使用Axios或Fetch等HTTP客户端发送POST请求  
			    },  
		}
	}
</script>

<style lang="scss">
	.uni-form-item{
		width: 550rpx; 
		height: 75rpx;
		// background-color: red;
		display: flex;
		line-height: 75rpx;
		margin-right: 10rpx;
	}
	.container1 {  
		padding: 20px; 
		display: flex;
	}  
	.title1 {  
	  font-size: 28rpx; 
	   width: 50%;
	  color: black;  
	  // margin-bottom: 10px;  
	}  
	.input {  
		// background-color: #007aff;
	  border: 1px solid #ccc;  
	  // border-radius: 4px;  
	  padding: 6px;  
	  width: 100%;  
	  // box-sizing: border-box;
	}  
	.button {  
		font-size: 28rpx;
		width: 115rpx;
		height: 70rpx;
	  background-color: #007aff;  
	  color: white;  
	  // border: none;  
	  border-radius: 4px;  
	  cursor: pointer; 
	} 
	.bodys{
		position: relative;
	}
	.content{
		width: 100%;
		position: absolute;
		top: 130rpx;
	}
	.main{
		width: 94%;
		height: 1200rpx;
		margin: 0 3%;
		display: flex;
		flex-direction: column;
		border-radius: 30rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.title{
		width: 90%;
		font-size: 38rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		line-height: 100rpx;
		font-weight: bold;
		border-bottom: 5rpx solid #eee;
		// background-color: #ffaaff;
	}
	.service,.order{
		width: 90%;
		border-bottom: 5rpx solid #eee;
		margin-top: 10rpx;
		line-height: 50rpx;
		padding-bottom: 20rpx;
		// background-color: #ff5500;
	}
	.title2{
		// background-color: #55ffff;
		font-size: 36rpx;
		line-height: 60rpx;
		font-weight: bold;
	}
	.but{
		// background-color: #00ff00;
		width: 70%;
		margin: 0 15%;
		margin-top: 30rpx;
		button{
			border-radius: 50rpx;
			font-size: 34rpx;
			
		}
	}
	.order text{
		margin-left: 20rpx;
	}
	.ifsubmit{
		width: 710rpx;
		height: 400rpx;
		border-radius: 30rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		.but{
			display: flex;
			flex-direction: row;
			margin-top: 40rpx;
			button{
				width: 150rpx;
				font-size: 28rpx;
			}
		}
	}
	.subTitle{
		line-height: 140rpx;
		font-size: 40rpx;
	}
	.subContent{
		// background-color: #ff00ff;
		width: 500rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		text-align: center;
	}
</style>
